<template>
  <div>
    <ul>
      遍历项目：
      <li v-for="item in data_items" v-bind:key="item.message">
        {{ item.message }}
      </li>
    </ul>
    <ul>
      遍历数组：
      <li v-for="(i, index) in data_array" v-bind:key="index">
        {{ index }}: {{ i }}
      </li>
    </ul>
    <ul>
      遍历对象（值）：
      <li v-for="value in data_object" v-bind:key="value">
        {{ value }}
      </li>
    </ul>
    <ul>
      遍历对象（键值）：
      <li v-for="(value, key) in data_object" v-bind:key="value">
        {{ key }}: {{ value }}
      </li>
    </ul>
    <ul>
      遍历对象（键值索引）：
      <li v-for="(value, key, index) in data_object" v-bind:key="value">
        {{ index }}. {{ key }}: {{ value }}
      </li>
    </ul>
    <div>
      遍历范围：
      <span v-for="i in 10" v-bind:key="i">{{ i }} </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "for",
  data: function () {
    return {
      data_items: [
        { message: "hello" },
        { message: "fkxxyz" },
        { message: "!" },
      ],
      data_array: [5, 1, 8, 0, 5],
      data_object: {
        a: 1,
        b: "is b",
        c: "hello",
      }
    }
  }
}
</script>

<style scoped>

</style>